<template>
  <a-layout-sider v-model:collapsed="props.isPackUp" :collapsible="false" collapsedWidth="48">
    <div class="w-[200px] h-[56px] relative dark:bg-[#212121]">
      <div class="flex justify-start items-center py-3 pl-[7px] gap-2 absolute left-0 enter-y">
        <app-logo class=""></app-logo>
        <span class="text-[16px] text-white font-bold" v-show="!props.isPackUp">
          {{ appName }}
        </span>
      </div>
    </div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      theme="dark"
      mode="inline"
      @click="(handleMenuClick as any)"
      v-model:openKeys="openKeys"
      @openChange="onOpenChange"
    >
      <template v-for="i in currentUser" :key="i.path">
        <a-menu-item class="enter-y" @click="to(i.path as string)" :key="i.name" v-if="!i.children">
          <template v-if="i.name === '成绩分析'">
            <form-outlined />
          </template>
          <template v-else-if="i.name === '用户管理'">
            <user-outlined />
          </template>
          <template v-else-if="i.name === '题库管理'">
            <read-outlined />
          </template>
          <template v-else-if="i.name === '考试管理'">
            <container-outlined />
          </template>
          <span>{{ i.name }}</span>
        </a-menu-item>
        <template v-else>
          <a-sub-menu class="enter-y" :key="i.name">
            <template #title>
              <template v-if="i.name === '题库管理'">
                <read-outlined />
              </template>
              <template v-else-if="i.name === '学生管理员'">
                <team-outlined />
              </template>
              <template v-else-if="i.name === '回收站'">
                <delete-outlined />
              </template>
              <span>{{ i.name }}</span>
            </template>
            <a-menu-item v-for="j in i.children" :key="j.name" @click="to(j.path as string)">
              {{ j.name }}
            </a-menu-item>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
  </a-layout-sider>
</template>

<script setup lang="ts">
  import {
    UserOutlined,
    FormOutlined,
    TeamOutlined,
    ReadOutlined,
    ContainerOutlined,
    DeleteOutlined,
  } from '@ant-design/icons-vue';
  import { Menu } from '@/utils/interface';
  import { useUserInfoStoreWithOut } from '@/stores/modules/userInfo';
  import {
    useradmin,
    studentadmin,
    examination,
    results,
    questionbank,
    recycling,
  } from '@/router/permissions';
  import { RouterHistory } from '@/utils/interface';
  import { useUtilsStoreWithOut } from '@/stores/modules/utils';

  const props = defineProps({
    isPackUp: {
      type: Boolean,
      defult: false,
    },
  });
  const openKeys = ref([]);
  const { getPermissions } = storeToRefs(useUserInfoStoreWithOut());
  const userInfoStore = useUserInfoStoreWithOut();
  const router = useRouter();
  let selectedKeys = ref<string[]>(['成绩分析']);
  const appName = import.meta.env.VITE_GLOB_APP_TITLE;
  const currentUser = ref<Menu[]>([]);
  const route = useRoute();
  const utilsStore = useUtilsStoreWithOut();
  watch(
    () => route.meta,
    (newMeta) => {
      selectedKeys.value = [route.meta.name as string];
      // 格式化数据
      const obj: RouterHistory = {
        id: newMeta.id as number,
        content: newMeta.name as string,
        path: route.path,
      };
      // 存进标签页的数组中
      utilsStore.addRouterHistory(obj);
      utilsStore.setActiveKey(newMeta.id as number);
    },
    {
      deep: true,
      immediate: true,
    }
  );
  // 获取登录用户权限
  onMounted(() => {
    currentUser.value.push(results);
    // 判断登录用户权限
    for (const i of getPermissions.value) {
      switch (i) {
        // 最高权限
        case '超级管理员':
          currentUser.value?.push(useradmin, studentadmin, questionbank, examination, recycling);
          break;
        // 学生管理员
        case '学生管理员':
          currentUser.value?.push(studentadmin);
          break;
        // 考试管理员
        case '考试管理员':
          currentUser.value?.push(questionbank, examination, recycling);
          break;
        // 防止篡改
        default:
          try {
            router.replace({ name: '404' });
          } catch {
            router.replace({ name: '404' });
          }
          break;
      }
    }
    userInfoStore.setCurrentUSerRouters(currentUser.value);
    if (utilsStore.routerHistory.length === 1) {
      router.replace({ name: 'results' });
    } else {
      router.replace(utilsStore.routerHistory[utilsStore.routerHistory.length - 1].path);
    }
  });
  const to = (name: string) => {
    router.replace({ name });
  };

  const handleMenuClick = ({ keyPath }) => {
    selectedKeys.value = keyPath;
  };
  const onOpenChange = (openKey: string[]) => {
    if (openKeys.value.length === 0) {
      openKeys.value = ['成绩分析'] as any;
    }
    openKeys.value = [openKey[openKey.length - 1]] as any;
  };
</script>

<style scoped>
  :deep(.ant-menu-item),
  :deep(.ant-menu-submenu-title) {
    @apply !pl-3;
  }
  /* :deep(.ant-menu-submenu-title > span) {
    @apply !pl-4;
  } */
  :deep(.ant-menu-submenu-title .ant-menu-item) {
    @apply !pl-6;
  }
  :deep(.ant-menu-item-only-child) {
    @apply !pl-10;
  }
  :deep(.ant-layout-sider-children),
  :deep(.ant-menu-item),
  :deep(.ant-menu) {
    @apply dark:bg-[#212121];
  }
  :deep(.ant-menu-item-only-child),
  :deep(.ant-menu-sub) {
    @apply dark:bg-[#2d2d2d];
  }
</style>
